<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>javascript 阶段</title>
    <style>
        .wrap {
            width: 260px;
            height: 420px;
            background-color: #ccc;
        }
        .wrap .title {
            width: 260px;
            height: 360px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 20px;
        }
        .wrap .content {
            width: 260px;
            height: 60px;
            background-color: #f0f0f0;
            display: flex;
        }
        .wrap .content button {
            border: 1px solid #ccc;
            flex-grow: 1;
            cursor: pointer;
            height: 60px;
        }
        .wrap .content button.active {
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="title">
            <span>0</span>
        </div>
        <div class="content">
            <button class="btn-start">开始</button>
            <button class="btn-pause">暂停</button>
            <button class="btn-reset">重置</button>
        </div>
    </div>

    <script>
            //要求：
                //点击start按钮，开始以每10毫秒的时间设置数字自增 1
                //点击pause按钮，暂停执行定时器函数，再点击start按钮,继续自增
                //点击reset按钮，暂停执行定时器函数同时，重置数字为 0

            // 步骤：
                // 1.0 获取页面相关的标签
                // 2.0 事件绑定
                // 3.0 书写程序逻辑

            // 编码：
            // 1. 获取页面相关的标签
            var spanEl = document.querySelector(".title span");
            var btnStart = document.querySelector(".btn-start");
            var btnPause = document.querySelector(".btn-pause");
            var spanReset = document.querySelector(".btn-reset");

            // 定义变量 记录数据
            var count = 0;
            var timer = null;// 表示尚未存在的定时器函数

            // 2. 事件绑定
            // 开始计时
            btnStart.onclick = function(){
                // 在事件作用域中
                // （使用定时器函数，先清除定时器 ）是一种防抖思想
                // 防止定时器函数被重复调用者
                clearInterval(timer);
                // 再执行定时器函数
                timer = setInterval(function(){
                    // 设置数字自增
                    count +=1;
                    // 设置spanEl标签的文本
                    spanEl.innerText = count;
                },10)
                // 设置按钮背景
                this.className = "active";
                btnPause.className = "";
                spanReset.className = "";
            }
            // 暂停计时
            btnPause.onclick = function(){
                // 停止执行定时器函数
                clearInterval(timer);
                // 设置按钮背景
                this.className = "active";
                btnStart.className = "";
                spanReset.className = "";
            }
            // 重置计数器变量
            spanReset.onclick = function(){
                // 停止执行定时器函数
                clearInterval(timer);
                // 设置按钮背景
                this.className = "active";
                btnStart.className = "";
                btnPause.className = "";
                // 重置计数器变量
                count = 0;
                // 设置spanEl标签的文本
                spanEl.innerText = 0;
            }



    </script>
</body>
</html>